<template>
  <section class="wh_container">
    <div class="wh_content_all">
      <div class="wh_top_changge">
        <li @click="PreMonth(myDate, false)">
          <div class="wh_jiantou1"></div>
        </li>
        <li class="wh_content_li">{{ dateTop }}</li>
        <li @click="NextMonth(myDate, false)">
          <div class="wh_jiantou2"></div>
        </li>
      </div>
      <div class="wh_content">
        <div
          class="wh_content_item"
          v-for="(tag, index) in textTop"
          :key="index"
        >
          <div class="wh_top_tag">{{ tag }}</div>
        </div>
      </div>
      <div class="wh_content">
        <div
          class="wh_content_item"
          v-for="(item, index) in list"
          :key="index"
          @click="clickDay(item)"
        >
          <div
            class="wh_item_date"
            :class="[
              { wh_isMark: item.isMark },
              { wh_other_dayhide: item.otherMonth !== 'nowMonth' },
              { wh_want_dayhide: item.dayHide },
              { wh_isToday: item.isToday },
              { wh_chose_day: item.chooseDay },
              setClass(item),
            ]"
          >
            {{ item.id }}
          </div>
        </div>
      </div>
    </div>
    <div class="wh_footer">
      排班规则:
      <span>班</span>
      <span>假</span>
      <span>休</span>
    </div>
  </section>
</template>

<script>
import timeUtil from "./util";
export default {
  name: "CalenderCard",

  data() {
    return {
      myDate: [],
      list: [],
      historyChose: [],
      dateTop: "",
    };
  },

  props: {
    markDate: {
      type: Array,
      default: () => [],
    },
    holidayDate: {
      type: Array,
      default: () => [],
    },
    markDateMore: {
      type: Array,
      default: () => [],
    },
    textTop: {
      type: Array,
      default: () => ["一", "二", "三", "四", "五", "六", "日"],
    },
    sundayStart: {
      type: Boolean,
      default: () => false,
    },
    agoDayHide: {
      type: String,
      default: `0`,
    },
    futureDayHide: {
      type: String,
      default: `2554387200`,
    },
  },

  created() {
    this.intStart();
    this.myDate = new Date();
  },

  methods: {
    intStart() {
      timeUtil.sundayStart = this.sundayStart;
    },
    setClass(data) {
      let obj = {};
      obj[data.markClassName] = data.markClassName;
      return obj;
    },
    clickDay: function(item) {
      if (item.otherMonth === "nowMonth" && !item.dayHide) {
        this.getList(this.myDate, item.date);
      }
      // if (item.otherMonth !== "nowMonth") {
      //   item.otherMonth === "preMonth"
      //     ? this.PreMonth(item.date)
      //     : this.NextMonth(item.date);
      // }
    },
    ChoseMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = new Date(date);
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    PreMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    NextMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    forMatArgs: function() {
      let markDate = this.markDate;
      let markDateMore = this.markDateMore;
      markDate = markDate.map((k) => {
        return timeUtil.dateFormat(k);
      });

      markDateMore = markDateMore.map((k) => {
        k.date = timeUtil.dateFormat(k.date);
        return k;
      });
      return [markDate, markDateMore];
    },
    getList: function(date, chooseDay, isChosedDay = true) {
      console.log(isChosedDay);
      const [markDate, markDateMore] = this.forMatArgs();
      this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
      let arr = timeUtil.getMonthList(this.myDate);
      for (let i = 0; i < arr.length; i++) {
        let markClassName = "";
        let k = arr[i];
        k.chooseDay = false;
        const nowTime = k.date;
        const t = new Date(nowTime).getTime() / 1000;
        //看每一天的class
        for (const c of markDateMore) {
          if (c.date === nowTime) {
            markClassName = c.className || "";
          }
        }
        //标记选中某些天 设置class
        k.markClassName = markClassName;
        k.isMark = markDate.indexOf(nowTime) > -1;
        //无法选中某天
        k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
        if (k.isToday) {
          this.$emit("isToday", nowTime);
        }
        let flag = !k.dayHide && k.otherMonth === "nowMonth";
        if (chooseDay && chooseDay === nowTime && flag) {
          this.$emit("choseDay", nowTime);
          this.historyChose.push(nowTime);
          k.chooseDay = true;
        } else if (
          this.historyChose[this.historyChose.length - 1] === nowTime &&
          !chooseDay &&
          flag
        ) {
          k.chooseDay = true;
        }
      }
      this.list = arr;
    },
  },

  mounted() {
    this.getList(this.myDate);
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.wh_item_date:hover {
    background white
    color white
  }
  .wh_container {
    max-width 410px
    margin auto
  }
  li {
    list-style-type none
  }
  .wh_top_changge {
    display flex
  }
  .wh_top_changge li {
    cursor pointer
    display flex
    color #fff
    font-size 18px
    flex 1
    justify-content: center
    align-items center
    height 47px
  }
  .wh_top_changge .wh_content_li {
    color black
    cursor auto
    flex 2.5
  }
  .wh_content_all {
    background-color white
    width 100%
    min-height 385px
    overflow hidden
    padding-bottom 8px
  }
  .wh_content {
    display flex
    flex-wrap wrap
    padding 0 3% 0 3%
    width 100%
  }

  .wh_content:first-child .wh_content_item_tag,
  .wh_content:first-child .wh_content_item {
    color #ddd
    font-size 16px
  }

  .wh_content_item,
  .wh_content_item_tag {
    font-size 15px
    width 13.4%
    text-align center
    color #000
    position relative
  }
  .wh_content_item {
    height 40px
  }

  .wh_top_tag {
    width 40px
    height 40px
    line-height 40px
    margin auto
    display flex
    justify-content center
    align-items center
  }

  .wh_item_date {
    width 40px
    height 40px
    line-height 40px
    margin auto
    display flex
    justify-content center
    align-items center
  }

  .wh_jiantou1 {
    width 12px
    height 12px
    border-top 2px solid rgb(88,154,229)
    border-left 2px solid rgb(88,154,229)
    transform rotate(-45deg)
  }

  .wh_jiantou1:active,
  .wh_jiantou2:active {
    border-color #ddd
  }

  .wh_jiantou2 {
    width 12px
    height 12px
    border-top 2px solid rgb(88,154,229)
    border-right 2px solid rgb(88,154,229)
    transform rotate(45deg)
  }
  .wh_content_item > .wh_isMark {
    margin auto
    border-radius 100px
    background rgb(25,138,255)
    z-index 2
  }

  .work_overtime{
    margin auto
    border-radius 100px
    background rgb(25,138,255)
    z-index 2
  }

  .leave{
    margin auto
    border-radius 100px
    background rgb(249,84,37)
    z-index 2
  }
  // 休假
  .vacation{
    margin auto
    border-radius 100px
    background rgb(26,223,171)
    z-index 2
  }

  .wh_content_item .wh_other_dayhide {
    color white
  }
  .wh_content_item .wh_want_dayhide {
    color #bfbfbf
  }
  .wh_content_item .wh_isToday {
    background rgb(245,245,253)
    border-radius 100px
  }
  .wh_content_item .wh_chose_day {
    background rgba(0,0,0,0.5)
    border-radius 100px
  }
  .wh_footer{
    position relative
    bottom 50px
    left 28px
    span{
      margin 0 8px
      border-radius 50%
      background-color #198AFF
      width 24px
      height 24px
      display inline-block
      text-align center
      font-size 14px
      color #fff
      line-height 24px
    }
    span:nth-child(2){
      background-color #F95425
    }
    span:nth-child(3){
      background-color #1ADFAB
    }
  }
</style>
